<template>
  <!-- 兴趣弹窗 开始 -->
  <uni-popup ref="customRef" type="center" @change="change">
    <view class="custom">
      <view class="custom-header">
        <view class="custom-title">选择你感兴趣的内容</view>
        <view class="custom-subtitle">至少选择1个，可以随时调整~</view>
      </view>
      <scroll-view class="custom-main" scroll-y>
        <view class="p-12">
          <view v-for="item in category" :key="item.id" class="custom-cell">
            <view class="custom-label">{{ item.title }}</view>
            <view class="custom-category">
              <view v-for="v in item.children" :key="v.id" class="custom-cateItem">
                <uni-tag circle :text="v.title" :type="interestIds.includes(v.id) ? 'primary' : 'default'" :inverted="!interestIds.includes(v.id)" @click="tagSelect(v.id)" />
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="custom-footer">
        <button class="round" :loading="loading" type="primary" @click="save">选好了</button>
      </view>
    </view>
  </uni-popup>
  <!-- 兴趣弹窗 结束 -->
</template>

<script>
export default {
  props: ['visible'],
  data() {
    return {
      loading: false,
      list: [],
      interestIds: [],
      category: []
    }
  },
  computed: {
    
  },
  watch: {
    visible(val) {
      val ? this.open() : this.close()
    },
    '$store.state.userInfo': {
      handler(val) {
        if (val.goods_interest) {
          this.interestIds = val.goods_interest?.map(v => Number(v.goods_cate_id)) ?? []
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.getCategroy()
  },
  methods: {
    getCategroy() {
      this.$f.get('api/goodsCate').then(res => {
        this.category = res.data
      })
    },
    open() {
      this.$refs.customRef.open()
    },
    close() {
      this.$refs.customRef.close()
    },
    change(e) {
      this.$emit('update:visible', e.show)
    },
    save() {
      this.loading = true
      const items = this.category.map((v) => {
        return v.children?.filter(t => this.interestIds.includes(t.id)).map(n => ({ goods_cate_id: n.id, goods_cate_name: n.title }))
      }).flat()
      this.$f.post('common/goodsInterest', { items }).then(res => {
        if (res.code === 0) {
          this.$f.toast('保存成功')
          const userInfo = { ...this.$store.state.userInfo, goods_interest: items }
          this.$store.commit('setState', { userInfo })
          this.close()
        }
      }).finally(() => {
        this.loading = false
      })
    },
    tagSelect(e) {
      const index = this.interestIds.indexOf(e)
      if (index === -1) {
        this.interestIds.push(e)
      } else {
        this.interestIds = this.interestIds.filter(v => v !== e)
      }
    }
  }
}
</script>

<style lang="scss">
	
.custom {
	width: 680rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background-color: #fff;
	::v-deep.uni-tag {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
}
.custom-header {
	padding: 24rpx 30rpx;
	color: #fff;
	background-image: linear-gradient(to right, $uni-primary 0%, #95C4FF 100%);
}
.custom-title {
	font-size: 40rpx;
	color: #fff;
}
.custom-subtitle {
	font-size: 26rpx;
	padding-top: 6rpx;
}
.custom-main {
	max-height: 60vh;
}
.custom-cell + .custom-cell {
	padding-top: 40rpx;
}
.custom-label {
	font-size: 32rpx;
	padding-bottom: 10rpx;
}
.custom-category {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10rpx;
}
.custom-cateItem {
	padding: 12rpx;
}
.custom-footer {
	padding: 20rpx 24rpx 30rpx;
	// background-image: linear-gradient(#fff, transparent);
}
</style>
